<template>
  <el-table :data="tableData" style="width: 100%;">
    <el-table-column label="订单信息" width="280">
      <template v-slot="scope">
        <OrderInfo :orderId="scope.row.orderId" :status="scope.row.status" :orderTime="scope.row.orderTime">
          <!-- <OrderInfo :orderId="orderId" :status="status" :orderTime="orderTime"> -->
        </OrderInfo>
      </template>
    </el-table-column>
    <el-table-column prop="customerName" label="客户名称" width="180"></el-table-column>
    <el-table-column prop="amount" label="金额" width="180"></el-table-column>
  </el-table>
</template>
<script>
import OrderInfo from './OrderInfo.vue';

export default {
  components: {
    OrderInfo
  },
  data() {
    return {
      tableData: [
        {
          orderId: '123456',
          status: '已支付',
          orderTime: '2023-10-01 10:00:00',
          customerName: '张三',
          amount: 1000
        },
        {
          orderId: '789012',
          status: '待发货',
          orderTime: '2023-10-02 11:00:00',
          customerName: '李四',
          amount: 1500
        }
      ]
    }
  }
}
</script>